<!-- 首页 -->
<template>
  <div class="index">
    <section class="index-bg">
      <img class="index-bg-img" src="@/static/index_1.png">
      <div class="index-bg-content">
        <div class="index-bg-title">安心充电·轻松运营·快速成长</div>
        <div class="index-bg-subTitle">真正的电动车共享充电全方位解决方案</div>
        <Consult class="index-bg-btn" />
      </div>
    </section>
    <!-- 解决方案 -->
    <section class="box-solve-project">
      <h2 class="solve-project-title">解决方案</h2>
      <div class="solve-project-content">
        <div class="solve-project-content-item" v-for="(val, index) in solveProjectList" :key="index">
          <img :src="require(`@/static/solve-project_${index}.png`)" />
          <div class="solve-project-content-item-right">
            <div class="solve-project-content-item-title">{{ val.title }}</div>
            <div class="solve-project-content-item-des">{{ val.des }}</div>
          </div>
        </div>
      </div>
      <div class="solve-project-btn">
        <Consult class="solve-project-btn1" />
        <nuxt-link :to="{name: `solve`}">
          <KnowMore class="solve-project-btn2" />
        </nuxt-link>
        <!-- <div @click="() => {this.$router.push({ name: `solve` })}">
          <KnowMore class="solve-project-btn2" />
        </div> -->
      </div>
    </section>
    <!-- 智能物联设备 -->
    <section class="box-intelligence-IOT-equip">
      <h2 class="intelligence-IOT-equip-title">智能物联设备</h2>
      <div class="intelligence-IOT-equip-content">
        <img src="@/static/index-intelligence-IOT-equip.png" />
        <div class="intelligence-IOT-equip-content-right">
          <div class="intelligence-IOT-equip-content-item" v-for="(val, index) in intelligenceIOTList" :key="index">
            <div class="intelligence-IOT-equip-content-title">{{ val.title }}</div>
            <div class="intelligence-IOT-equip-content-des">{{ val.des }}</div>
          </div>
          <div class="intelligence-IOT-equip-btn">
            <Consult class="intelligence-IOT-equip-btn1" />
            <!-- <div @click="() => {this.$router.push({ path: `/product#equipIntroduce` })}">
              <KnowMore class="intelligence-IOT-equip-btn2" />
            </div> -->
            <nuxt-link :to="{path: `/product#equipIntroduce`}">
              <KnowMore class="intelligence-IOT-equip-btn2" />
            </nuxt-link>
          </div>
        </div>
      </div>
    </section>
    <!-- 数字化平台 -->
    <section class="box-digitization-platform">
      <h2 class="digitization-platform-title">数字化平台</h2>
      <div class="digitization-platform-content">
        <div class="digitization-platform-right">
          <div class="digitization-platform-content-item" v-for="(val, index) in digitizationPlatformList" :key="index">
            <div class="digitization-platform-content-title">{{ val.title }}</div>
            <div class="digitization-platform-content-des">{{ val.des }}</div>
          </div>
          <div class="digitization-platform-btn">
            <Consult class="digitization-platform-btn1" />
            <!-- <div @click="() => {this.$router.push({ path: `/product#chargeApplets` })}">
              <KnowMore class="digitization-platform-btn2" />
            </div> -->
            <nuxt-link :to="{path: `/product#chargeApplets`}">
              <KnowMore class="digitization-platform-btn2" />
            </nuxt-link>
          </div>
        </div>
        <img src="@/static/index-digitization-platform.png" />
      </div>
    </section>
    <!-- 服务能力 -->
    <section class="box-service-ability">
      <h2 class="service-ability-title">服务能力</h2>
      <div class="service-ability-content">
        <div class="service-ability-content-item" v-for="(val, index) in serviceAbilityList" :key="index">
          <img :src="require(`@/static/service-ability_${index}.png`)" />
          <div class="service-ability-content-title">{{ val }}</div>
        </div>
      </div>
    </section>
    <!-- 充电数据 -->
    <section class="box-charge-data">
      <!-- <img src="@/static/index_2.png"> -->
      <div class="charge-data-content">
        <h2 class="charge-data-title">安全充电{{ chargeTime }}次</h2>
        <div class="charge-data-subtitle">更专注/更专心/更专业的稳定提供充电服务</div>
        <div class="charge-data-content-list">
          <div class="charge-data-content-list-item" v-for="(val, index) in chargeDataList" :key="index">
            <div class="charge-data-content-list-item-data">
              <span>{{ val.data }}</span>
              <span class="charge-data-content-list-item-data-unit">{{ val.unit }}</span>
            </div>
            <div class="charge-data-content-list-item-title">{{ val.title }}</div>
          </div>
        </div>
        <div class="service-content">
          <div class="service-content-item" v-for="(val, index) in serviceList" :key="index">
            <img :src="require(`@/static/service-${index}.png`)">
            <div class="service-content-item-title">{{ val }}</div>
          </div>
        </div>
      </div>
    </section>
    <!-- 合作案例 -->
    <CooperationDemo />
    <!-- 资讯动态 -->
    <section class="box-information" id="box-informatio">
      <h2 class="information-title">资讯动态</h2>
      <div class="information-content">
        <div class="information-content-item" v-for="(val, index) in informationList" :key="index">
          <nuxt-link class="information-content-item-wrap" :to="{path: `/news/detail/${val.id}`}">
            <div class="information-content-item-title">{{ val.title }}</div>
            <div class="information-content-item-des">{{ val.desc }}</div>
            <div class="information-content-item-time">
              <span class="icon">{{ val.type }}</span>
              <span>{{ val.createTime }}</span>
            </div>
          </nuxt-link>
        </div>
      </div>
      <nuxt-link class="information-btn" :to="{path: `/news/1`}">
        了解更多
      </nuxt-link>
      <!-- <div class="" @click="() => {this.$router.push({ path: `/news/1` })}">了解更多</div> -->
    </section>
    <!-- <div class="service" style="width:1180px;height:300px;margin:0 auto">
      <iframe style="margin:0 auto" height="500px" width="500px" src="https://yzf.qq.com/xv/web/static/chat/index.html?sign=37ef9b9780275393224c99ea48b4b163b4d944cb72b98c4f9e590080457f0225dda125b63937827725581c0b2818644735e24015" frameborder="1"></iframe>
    </div> -->
  </div>
</template>

<script>
import { browserRedirect } from '@/components/mobileConsult.js'
import $ from 'jquery'
export default {
  data () {
    return {
      solveProjectList: [
        {
          title: '稳定可靠',
          des: '智能物联设备+分布式物联网平台，充电稳定可靠，99.99%不掉线'
        },
        {
          title: '提升收入',
          des: '基于2000+站点的营销方案，提供超丰富的费率和营销工具，收入提升50%'
        },
        {
          title: '省心省力',
          des: '业内首家推出拓展/安装/运维全周期的数字化管理系统，轻松管理海量站点'
        },
        {
          title: '资金安全',
          des: '率先接入资金监管平台，实时直接入账，没有账期没有中转，保证商户资金安全'
        },
        {
          title: '定制集成',
          des: '提供贴牌OEM和定制化集成服务，提升商户品牌形象和个性化需求'
        },
        {
          title: '更多解决方案',
          des: '联系客服了解更多解决方案…'
        }
      ],
      intelligenceIOTList: [
        {
          title: '自主研发',
          des: '完全知识产权，设计研发生产全流程，拥有多项专利'
        },
        {
          title: '安全保护',
          des: '漏电断电/过载空载/防水电雷等全面保护，百万保险承保'
        },
        {
          title: '智慧物联',
          des: '2G/4G/WiFi/LoRa/485/蓝牙等多种联网方案'
        },
        {
          title: '优异体验',
          des: '支持扫码刷卡，使用方便，外观简约大气'
        }
      ],
      digitizationPlatformList: [
        {
          title: '充电小程序',
          des: '即扫即用，充电状态实时查看，在线购卡充值更方便'
        },
        {
          title: '运营商平台',
          des: '提供电脑手机多端管理，设备/订单/营销/资金/分成/员工全套管理功能，运营更轻松'
        },
        {
          title: 'DingGo运维系统',
          des: '站点越来越多？运维售后很难管理？DingGo帮助运营商发现问题、分配任务、效果跟踪、人员动向等，轻松管理万站千人'
        },
        {
          title: 'DingData数据分析系统',
          des: '系统账单乱？利润算不清？赚钱不赚钱？经营报表让收支一目了然，并提供分析解决方案'
        }
      ],
      serviceAbilityList: ['技术领先', '系统稳定', '服务专业', '资金安全', '运营支持', '定制服务'],
      chargeDataList: [
        {
          title: '运营商家',
          data: 1100,
          unit: '个'
        },
        {
          title: '充电用户',
          data: 104,
          unit: '万'
        },
        {
          title: '充电端口',
          data: 15,
          unit: '万'
        },
        {
          title: '城市',
          data: 203,
          unit: '座'
        },
        {
          title: '站点',
          data: 3100,
          unit: '个'
        }
      ],
      serviceList: ['运营商', '代理商', '物业', '服务集成商', '施工商', '企事业单位', '学校', '出租房/个体商户'],
      informationList: [],
      chargeTime: 0,
      isMobile: false
    }
  },
  async asyncData ({$axios}) {
    const res = await $axios.get(`https://${process.env.VUE_APP_TITLE == 'test' ? 'test.' : '' }api.dingdingzn.com/dms/common/news/hot?token=f23f6eec9b2107d441000d66d80f5541`, "GET").then(res => {
      return res.data.data.news
    })
    return {
      informationList: res.slice(0, 3)
    }
  },
  created () {
  },
  mounted () {
    this.isMobile = browserRedirect()
    let once = true
    $(document).scroll(() => {
      if (once) {
        if ($(document).scrollTop() > 3080 && this.isMobile) {
          once = false
          this.scroll()
        } else if ($(document).scrollTop() > 2180 && !this.isMobile) {
          once = false
          this.scroll()
        }
        
      }
    })
  },
  computed: {
    format () {
      return (val) => {
        return val > 9 ? '' + val : '0' + val
      }
    },
    formatRes () {
      return (val) => {
        const res = val.toString().split('').reverse().join('')
        let res2 = ''
        for(let i = 0; i < res.length; i ++) {
          if (i > 0 && i%3 === 0) {
            res2 += ','
          }
          res2 += res[i]
        }
        return res2.split('').reverse().join('')
      }
    }
  },
  methods: {
    scroll () {
      const days = (new Date().getTime() - this.transdate('2020-10-14 00:00:00')) / (24 * 3600 * 1000)
      const chargeTime = 54319538 + parseInt(days) * 34231
      let initChargeTime = 0
      let t = setInterval(() => {
        if (initChargeTime < chargeTime) {
          const time = parseInt(Math.random()*10000) + 1200000
          initChargeTime += time
          this.chargeTime = this.formatRes(initChargeTime)
        } else {
          this.chargeTime = this.formatRes(chargeTime)
          initChargeTime = chargeTime
          clearInterval(t)
        }
      }, 20)
    },
    transdate(endTime){
      const date=new Date();
      date.setFullYear(endTime.substring(0,4));
      date.setMonth(endTime.substring(5,7)-1);
      date.setDate(endTime.substring(8,10));
      date.setHours(endTime.substring(11,13));
      date.setMinutes(endTime.substring(14,16));
      date.setSeconds(endTime.substring(17,19));
      return Date.parse(date);
    }
  },
  head() {
    return {
      title: 'title',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: 'keywords'
        },
        {
          hid: 'description',
          name: 'description',
          content: 'description'
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
@media screen and (min-width: 750px)
  .titleStyle
    width: 100%
    text-align: center
    margin: 60px auto 48px
    color: #282C32
    font-size: 32px
    font-weight: 400
    line-height: 48px
  .knowMoreBtn
    width: 380px
    height: 52px
    display: block
    font-size: 18px
    border-radius: 4px
    border-color: rgba(48, 54, 64, 0.15)
    border-width: 1px
    border-style: solid
    line-height: 52px
    text-align: center
    color: rgba(48, 54, 64, 0.7)
    margin: 0 auto
    cursor: pointer
    text-decoration: none
  .index
    width: 100%
    height: auto
    .index-bg
      width: 1180px
      margin: 0 auto
      position: relative
      .index-bg-img
        width: 100%
        position: relative
      .index-bg-content
        width: 1180px
        position: absolute
        top: 48px
        .index-bg-title
          width: 100%
          font-size: 48px
          color: #282C32
          line-height: 68px
          font-weight: bolder
          margin-top: 76px
        .index-bg-subTitle
          width: 100%
          font-size: 24px
          color: #F57033
          line-height: 34px
          margin: 16px 0 40px
        .index-bg-btn
          margin-top: 0px
    .box-solve-project
      height: 700px
      background: #F8F8F8
      clear: both
      overflow: hidden
      .solve-project-title
        @extend .titleStyle
      .solve-project-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-between
        .solve-project-content-item
          width: 380px
          height: 184px
          padding: 36px 32px 32px
          background: #FFF
          display: flex
          flex-direction: row
          border-radius: 8px
          margin-bottom: 24px
          img
            width: 96px
            height: 96px
            margin-right: 24px
          .solve-project-content-item-right
            .solve-project-content-item-title
              font-size: 24px
              color: #282C32
              margin-bottom: 12px
            .solve-project-content-item-des
              width: 196px
              height: 72px
              line-height: 24px
              font-size: 16px
              color: rgba(48, 54, 64, 0.7)
      .solve-project-btn
        width: 580px
        margin: 0 auto
        margin-top: 24px
        display: flex
        flex-direction: row
        justify-content: space-between
    .box-intelligence-IOT-equip
      height: 650px
      clear: both
      overflow: hidden
      .intelligence-IOT-equip-title
        @extend .titleStyle
      .intelligence-IOT-equip-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        img
          width: 480px
          height: 450px
          margin-right: 100px
        .intelligence-IOT-equip-content-right
          .intelligence-IOT-equip-content-item
            width: 580px
            .intelligence-IOT-equip-content-title
              color: #282C32
              font-size: 24px
              margin-bottom: 8px
            .intelligence-IOT-equip-content-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 20px
              margin-bottom: 16px
          .intelligence-IOT-equip-btn
            width: 580px
            margin: 36px auto 0
            display: flex
            flex-direction: row
            justify-content: space-between
    .box-digitization-platform
      padding-bottom: 60px
      background: #F8F8F8
      clear: both
      overflow: hidden
      .digitization-platform-title
        @extend .titleStyle
      .digitization-platform-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        img
          width: 480px
          height: 450px
          margin-left: 120px
        .digitization-platform-right
          .digitization-platform-content-item
            width: 580px
            margin-bottom: 32px
            .digitization-platform-content-title
              color: #282C32
              font-size: 24px
              line-height: 32px
              margin-bottom: 8px
            .digitization-platform-content-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 20px
              line-height: 30px
          .digitization-platform-btn
            margin-top: 32px
            width: 580px
            display: flex
            flex-direction: row
            justify-content: space-between
    .box-service-ability
      height: 396px
      clear: both
      overflow: hidden
      .service-ability-title
        @extend .titleStyle
      .service-ability-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        justify-content: space-around
        .service-ability-content-item
          width: 96px
          img
            width: 96px
            height: 96px
            margin-bottom: 16px
          .service-ability-content-title
            color: #282C32
            font-size: 20px
            text-align: center
        .intelligence-IOT-btns
          margin-top: 32px
      .service-ability-btn
        width: 1180px
        margin: 0 auto
        margin-top: 60px
        .service-ability-btns
          margin: 0 auto
    .box-charge-data
      min-width: 1180px
      background: #f57033
      clear: both
      overflow: hidden
      .charge-data-content
        background: url('../static/index_2.png') no-repeat
        background-size: 100% 100%
        width: 1180px
        height: 733px
        color: #FFF
        margin: 0 auto
        .charge-data-title
          width: 100%
          text-align: center
          font-size: 56px
          margin: 60px 0 8px
          line-height: 78px
        .charge-data-subtitle
          width: 100%
          text-align: center
          font-size: 24px
          line-height: 34px
          margin-bottom: 40px
        .charge-data-content-list
          width: 1180px
          display: flex
          flex-direction: row
          justify-content: space-around
          .charge-data-content-list-item
            .charge-data-content-list-item-data
              font-size: 68px
              .charge-data-content-list-item-data-unit
                font-size: 20px
            .charge-data-content-list-item-title
              text-align: center
        .service-content
          margin: 0 auto
          width: 920px
          display: flex
          flex-direction: row
          flex-wrap: wrap
          justify-content: space-between
          margin-top: 60px
          .service-content-item
            text-align: center
            width: 230px
            margin-bottom: 56px
            img
              width: 80px
              display: block
              margin: 0 auto
            .service-content-item-title
              font-size: 18px
              color: #fff
              line-height: 26px
    .box-information
      min-width: 1180px
      background: #F8F8F8
      margin: 0 auto
      height: 562px
      clear: both
      overflow: hidden
      .information-title
        @extend .titleStyle
      .information-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        justify-content: space-around
        margin-bottom: 48px
        .information-content-item
          width: 380px
          height: 256px
          cursor: pointer
          clear: both
          overflow: hidden
          &:hover .information-content-item-wrap
            margin-top: 0px
            box-shadow: 0 4px 16px rgba(19, 27, 39, 0.05)
          .information-content-item-wrap
            width: 380px
            height: 246px
            text-decoration: none
            display: block
            background: #FFF
            margin-top: 10px
            transition: margin-top 150ms
            clear: both
            overflow: hidden
            .information-content-item-title
              width: 332px
              height: 56px
              color: #282C32
              font-size: 20px
              line-height: 28px
              margin: 32px 24px 16px
              line-height: 28px
              overflow: hidden
              text-overflow: ellipsis
              display: -webkit-box
              -webkit-line-clamp: 2
              -webkit-box-orient: vertical
            .information-content-item-des
              width: 332px
              height: 66px
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              line-height: 22px
              overflow: hidden
              text-overflow: ellipsis
              display: -webkit-box
              -webkit-line-clamp: 3
              -webkit-box-orient: vertical
              margin: 0px 24px 26px
            .information-content-item-time
              width: 332px
              font-size: 12px
              color: rgba(48, 54, 64, 0.5)
              line-height: 20px
              display: flex
              flex-direction: row
              justify-content: space-between
              margin-left: 24px
              .icon
                padding: 2px 8px
                background: #F2F4F5
                color: #3182F3
                border-radius: 4px
                margin-right: 16px
      .information-btn
        @extend .knowMoreBtn
      .information-btn:hover
        border-color: #F57033
        color: #F57033
</style>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .titleStyle
    width: 100vw
    margin: 0 auto
    text-align: center
    margin: 24px auto 18px
    color: #282C32
    font-size: 28px
    font-weight: bolder
  .knowMoreBtn
    width: 180px
    height: 32px
    display: block
    border-radius: 4px
    border-color: rgba(48, 54, 64, 0.15)
    border-width: 1px
    border-style: solid
    line-height: 32px
    text-align: center
    color: rgba(48, 54, 64, 0.7)
    margin: 0 auto
    text-decoration: none
  .index
    width: 100vw
    height: auto
    .index-bg
      width: 100vw
      margin: 0 auto
      position: relative
      height: 284px
      .index-bg-img
        width: 100%
        position: relative
        top: 120px
      .index-bg-content
        width: 90vw
        position: absolute
        top: 5vw
        left: 5vw
        text-align: center
        .index-bg-title
          width: 90vw
          font-size: 24px
          color: #282C32
          line-height: 18px
          font-weight: bolder
          margin-top: 3vw
        .index-bg-subTitle
          width: 90vw
          font-size: 14px
          color: #F57033
          line-height: 14px
          margin: 16px 0 14px
        .index-bg-btn
          margin-top: 0px
    .box-solve-project
      width: 100vw
      height: auto
      background: #F8F8F8
      clear: both
      overflow: hidden
      .solve-project-title
        @extend .titleStyle
      .solve-project-content
        width: 100vw
        .solve-project-content-item
          width: 90vw
          height: 36vw
          margin-left: 5vw
          padding: 6vw 5vw 5vw
          background: #FFF
          display: flex
          flex-direction: row
          border-radius: 4px
          margin-bottom: 24px
          img
            width: 20vw
            height: 20vw
            margin-right: 4vw
          .solve-project-content-item-right
            .solve-project-content-item-title
              font-size: 18px
              color: #282C32
              margin-bottom: 10px
            .solve-project-content-item-des
              width: 55vw
              line-height: 20px
              font-size: 14px
              color: rgba(48, 54, 64, 0.7)
      .solve-project-btn
        width: 180px
        margin: 6vw auto
        .solve-project-btn1
          display: none
    .box-intelligence-IOT-equip
      width: 100vw
      height: auto
      clear: both
      overflow: hidden
      .intelligence-IOT-equip-title
        @extend .titleStyle
      .intelligence-IOT-equip-content
        margin: 0 auto
        width: 100vw
        img
          width: 90vw
          margin-left: 5vw
        .intelligence-IOT-equip-content-right
          width: 90vw
          margin-left: 5vw
          .intelligence-IOT-equip-content-item
            width: 90vw
            .intelligence-IOT-equip-content-title
              color: #282C32
              font-size: 20px
              margin-bottom: 8px
            .intelligence-IOT-equip-content-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              margin-bottom: 16px
          .intelligence-IOT-equip-btn
            width: 180px
            margin: 6vw auto
            .intelligence-IOT-equip-btn1
              display: none
    .box-digitization-platform
      width: 100vw
      height: auto
      clear: both
      overflow: hidden
      background: #F8F8F8
      .digitization-platform-title
        @extend .titleStyle
      .digitization-platform-content
        width: 100vw
        img
          width: 90vw
          margin-left: 5vw
          margin-bottom: 5vw
        .digitization-platform-right
          margin-left: 5vw
          .digitization-platform-content-item
            width: 90vw
            .digitization-platform-content-title
              color: #282C32
              font-size: 20px
              margin-bottom: 8px
            .digitization-platform-content-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              margin-bottom: 16px
          .digitization-platform-btn
            width: 180px
            margin: 6vw auto
            .digitization-platform-btn1
              display: none
    .box-service-ability
      width: 100vw
      height: auto
      clear: both
      overflow: hidden
      .service-ability-title
        @extend .titleStyle
      .service-ability-content
        width: 90vw
        margin-left: 5vw
        margin-bottom: 8vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-around
        .service-ability-content-item
          width: 45vw
          text-align: center
          margin-bottom: 12px
          img
            width: 18vw
            margin-bottom: 16px
          .service-ability-content-title
            color: #282C32
            font-size: 18px
        .intelligence-IOT-btns
          margin-top: 32px
      .service-ability-btn
        width: 1180px
        margin: 0 auto
        margin-top: 60px
        .service-ability-btns
          margin: 0 auto
    .box-charge-data
      width: 100vw
      height: auto
      clear: both
      overflow: hidden
      background: #f57033
      padding-bottom: 5vw
      .charge-data-content
        background: url('../static/index_2.png') no-repeat
        background-size: 100% 100%
        width: 100vw
        color: #FFF
        margin: 0 auto
        .charge-data-title
          width: 100%
          text-align: center
          font-size: 34px
          margin: 24px 0 24px
          line-height: 24px
        .charge-data-subtitle
          width: 100%
          text-align: center
          font-size: 14px
          line-height: 20px
          margin-bottom: 30px
          color: rgba(255, 255, 255, 0.8)
        .charge-data-content-list
          width: 90vw
          margin-left: 5vw
          display: flex
          flex-direction: row
          flex-wrap: wrap
          justify-content: space-around
          .charge-data-content-list-item
            width: 30vw
            margin-bottom: 20px
            text-align: center
            .charge-data-content-list-item-data
              font-size: 36px
              line-height: 30px
              height: 34px
              .charge-data-content-list-item-data-unit
                font-size: 12px
            .charge-data-content-list-item-title
              text-align: center
              font-size: 12px
              color: rgba(255, 255, 255, 0.8)
        .service-content
          margin: 0 auto
          width: 90vw
          margin-left: 5vw
          display: flex
          flex-direction: row
          flex-wrap: wrap
          justify-content: space-between
          margin-top: 10px
          .service-content-item
            text-align: center
            width: 22.5vw
            margin-bottom: 20px
            img
              width: 12vw
              display: block
              margin: 0 auto
            .service-content-item-title
              font-size: 12px
              color: #fff
              line-height: 18px
              color: rgba(255, 255, 255, 0.8)
    .box-information
      min-width: 100vw
      background: #F8F8F8
      margin: 0 auto
      height: auto
      clear: both
      overflow: hidden
      .information-title
        @extend .titleStyle
      .information-content
        margin: 0 auto
        width: 1180px
        margin-bottom: 24px
        .information-content-item
          width: 90vw
          margin-left: 5vw
          margin-bottom: 5vw
          background: #FFF
          clear: both
          overflow: hidden
          .information-content-item-wrap
            width: 90vw
            clear: both
            overflow: hidden
            text-decoration: none
            .information-content-item-title
              width: 80vw
              height: 48px
              color: #282C32
              font-size: 20px
              line-height: 24px
              margin: 5vw 5vw 2vw
              overflow: hidden
              text-overflow: ellipsis
              display: -webkit-box
              -webkit-line-clamp: 2
              -webkit-box-orient: vertical
            .information-content-item-des
              width: 80vw
              height: 66px
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              line-height: 22px
              overflow: hidden
              text-overflow: ellipsis
              display: -webkit-box
              -webkit-line-clamp: 3
              -webkit-box-orient: vertical
              margin: 0px 5vw 2vw
            .information-content-item-time
              width: 80vw
              font-size: 14px
              color: rgba(48, 54, 64, 0.5)
              line-height: 20px
              display: flex
              flex-direction: row
              justify-content: space-between
              margin-left: 5vw
              margin-bottom: 5vw
              .icon
                padding: 2px 8px
                background: #F2F4F5
                color: #3182F3
                border-radius: 4px
                margin-right: 16px
      .information-btn
        @extend .knowMoreBtn
        margin-bottom: 24px
</style>
